{% extends 'jwxt/base.html' %}
{% load dict_extras %}

{% block title %}课程表 - 黄淮学院教务系统{% endblock %}

{% block content %}
<style>
    /* 现代商业简约风格课程表 */
    .schedule-container {
        margin: 0;
        padding: 24px;
        min-height: 100vh;
        background: #f8fafc;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .schedule-card {
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
        background: white;
        overflow: hidden;
    }
    
    .schedule-header {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        color: white;
        padding: 32px;
        border: none;
    }
    
    .schedule-title {
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0;
        letter-spacing: -0.025em;
    }
    
    .btn-grades {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        border-radius: 12px;
        padding: 12px 24px;
        font-weight: 600;
        font-size: 0.875rem;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(10px);
    }
    
    .btn-grades:hover {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.3);
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }
    
    /* 表格样式 */
    .schedule-table {
        margin: 0;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 0.875rem;
        width: 100%;
    }
    
    .schedule-table th {
        background: #f1f5f9;
        color: #475569;
        font-weight: 600;
        text-align: center;
        padding: 16px 12px;
        border: none;
        border-bottom: 1px solid #e2e8f0;
        position: sticky;
        top: 0;
        z-index: 10;
        font-size: 0.875rem;
    }
    
    .schedule-table th:first-child {
        border-left: none;
    }
    
    .schedule-table th:last-child {
        border-right: none;
    }
    
    .time-cell {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        color: white;
        font-weight: 600;
        text-align: center;
        vertical-align: middle;
        width: 100px;
        border: none;
        border-right: 1px solid #e2e8f0;
        position: relative;
    }
    
    .section-cell {
        background: #f8fafc;
        color: #64748b;
        font-weight: 500;
        text-align: center;
        vertical-align: middle;
        width: 80px;
        border: none;
        border-right: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .course-cell {
        padding: 12px;
        border: none;
        border-right: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        vertical-align: top;
        height: 90px;
        position: relative;
        background: white;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .course-cell:hover {
        background: #f0fdf4;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
    }
    
    .course-content {
        background: linear-gradient(135deg, #059669 0%, #10b981 100%);
        color: white;
        padding: 12px;
        border-radius: 12px;
        font-size: 0.8rem;
        line-height: 1.4;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2);
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
        font-weight: 500;
        border: none;
        overflow: hidden;
        position: relative;
    }
    
    .course-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    
    .course-content:hover::before {
        opacity: 1;
    }
    
    .course-content:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 24px rgba(5, 150, 105, 0.25);
    }
    
    .course-content:active {
        transform: translateY(0) scale(0.98);
    }
    
    /* 移除表格边框的灰色角落 */
    .schedule-table tbody tr:last-child .course-cell,
    .schedule-table tbody tr:last-child .section-cell {
        border-bottom: none;
    }
    
    .schedule-table .course-cell:last-child,
    .schedule-table .section-cell:last-child,
    .schedule-table th:last-child {
        border-right: none;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        .schedule-container {
            padding: 16px;
        }
        
        .schedule-header {
            padding: 24px 20px;
        }
        
        .schedule-title {
            font-size: 1.5rem;
        }
        
        .schedule-table {
            font-size: 0.8rem;
        }
        
        .course-cell {
            height: 70px;
            padding: 8px;
        }
        
        .course-content {
            font-size: 0.75rem;
            padding: 8px;
            border-radius: 8px;
        }
        
        .time-cell, .section-cell {
            width: 60px;
        }
    }
    
    /* 现代动画效果 */
    @keyframes slideInUp {
        from {
            opacity: 0;
            transform: translateY(24px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .schedule-card {
        animation: slideInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* 微交互效果 */
    .schedule-table tbody tr {
        transition: background-color 0.2s ease;
    }
    
    .schedule-table tbody tr:hover {
        background-color: rgba(240, 253, 244, 0.5);
    }
</style>

<div class="schedule-container">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card schedule-card">
                <div class="card-header schedule-header d-flex justify-content-between align-items-center">
                    <h5 class="schedule-title">课程表 - {{ major_name }}</h5>
                    <a href="{% url 'grades' %}" class="btn btn-grades">查看成绩</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table schedule-table">
                        <thead>
                            <tr>
                                <th style="width: 80px;">时间</th>
                                <th style="width: 60px;">节次</th>
                                {% for weekday in weekdays %}
                                    <th class="text-center">{{ weekday }}</th>
                                {% endfor %}
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 上午：第一、二节 -->
                            <tr>
                                <td rowspan="2" class="time-cell">
                                    <strong>上午</strong>
                                </td>
                                <td class="section-cell">第一节</td>
                                {% for weekday in weekdays %}
                                    <td class="course-cell">
                                        {% if schedule_table.上午.一|lookup:weekday %}
                                            <div class="course-content">
                                                {{ schedule_table.上午.一|lookup:weekday }}
                                            </div>
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                            <tr>
                                <td class="section-cell">第二节</td>
                                {% for weekday in weekdays %}
                                    <td class="course-cell">
                                        {% if schedule_table.上午.二|lookup:weekday %}
                                            <div class="course-content">
                                                {{ schedule_table.上午.二|lookup:weekday }}
                                            </div>
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                            
                            <!-- 下午：第三、四节 -->
                            <tr>
                                <td rowspan="2" class="time-cell">
                                    <strong>下午</strong>
                                </td>
                                <td class="section-cell">第三节</td>
                                {% for weekday in weekdays %}
                                    <td class="course-cell">
                                        {% if schedule_table.下午.三|lookup:weekday %}
                                            <div class="course-content">
                                                {{ schedule_table.下午.三|lookup:weekday }}
                                            </div>
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                            <tr>
                                <td class="section-cell">第四节</td>
                                {% for weekday in weekdays %}
                                    <td class="course-cell">
                                        {% if schedule_table.下午.四|lookup:weekday %}
                                            <div class="course-content">
                                                {{ schedule_table.下午.四|lookup:weekday }}
                                            </div>
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                            
                            <!-- 晚上：第五节 -->
                            <tr>
                                <td rowspan="1" class="time-cell">
                                    <strong>晚上</strong>
                                </td>
                                <td class="section-cell">第五节</td>
                                {% for weekday in weekdays %}
                                    <td class="course-cell">
                                        {% if schedule_table.晚上.五|lookup:weekday %}
                                            <div class="course-content">
                                                {{ schedule_table.晚上.五|lookup:weekday }}
                                            </div>
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 课程表交互效果
document.addEventListener('DOMContentLoaded', function() {
    // 为课程内容添加点击效果
    const courseContents = document.querySelectorAll('.course-content');
    courseContents.forEach(content => {
        content.addEventListener('click', function() {
            // 添加点击动画
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 150);
        });
    });
    
    // 添加表格行的悬停效果
    const tableRows = document.querySelectorAll('tbody tr');
    tableRows.forEach(row => {
        row.addEventListener('mouseenter', function() {
            this.style.backgroundColor = 'rgba(40, 167, 69, 0.05)';
        });
        row.addEventListener('mouseleave', function() {
            this.style.backgroundColor = '';
        });
    });
});
</script>
{% endblock %}
